<template>
  <el-date-picker
    v-bind="$attrs"
    v-model="val"
    :type="type"
    :align="align"
    :range-separator="$t('other.to')"
    :start-placeholder="$t('other.startDate')"
    :end-placeholder="$t('other.endDate')"
    :value-format="valueFormat"
    :picker-options="pickerOptions"
    v-on="$listeners"
    style="width: 100%">
  </el-date-picker>
</template>

<script>
import { pickerOptions } from '@/utils/pickerOptions'
export default {
  name: 'DatePicker',
  props: {
    value: [String, Array],
    showPicker: {
      type: Boolean,
      default: false
    },
    align: {
      type: String,
      default: 'center'
    },
    type: {
      type: String,
      default: 'daterange'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    }
  },
  computed: {
    val: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  data() {
    return {
      pickerOptions: this.showPicker ? pickerOptions : {}
    }
  }
}
</script>
